<!DOCTYPE html>
<html class="screen-full">
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登录</title>
		<script src="../js/mui.min.js"></script>
		<script src="../js/storage.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/party.css" rel="stylesheet" />
		<link href="../css/customize.css" rel="stylesheet" />
		<link href="../css/login-modern.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		<!-- 动态粒子背景 -->
		<div class="particles">
			<div class="particle"></div>
			<div class="particle"></div>
			<div class="particle"></div>
			<div class="particle"></div>
			<div class="particle"></div>
			<div class="particle"></div>
			<div class="particle"></div>
			<div class="particle"></div>
			<div class="particle"></div>
		</div>

		<!-- 主登录容器 -->
		<div class="login-container">
			<div class="login-card">
				<!-- Logo和标题区域 -->
				<div class="login-header">
					<div class="logo-container">
						<div class="logo-box">
							<img src="../image/logo.png" alt="Logo"/>
						</div>
						<div>
							<h1 class="login-title">账号登录</h1>
							<p class="login-subtitle">欢迎使用智能大棚环境监测系统</p>
						</div>
					</div>
				</div>

				<!-- 手机号输入框 -->
				<div class="input-group">
					<input type="text" class="input-field" placeholder="请输入手机号" id="phone">
					<div class="input-line"></div>
				</div>

				<!-- 密码输入框 -->
				<div class="input-group">
					<div class="password-wrapper" id="pwdWrapper">
						<input type="password" class="input-field" placeholder="请输入密码" id="pwd">
						<button type="button" class="toggle-password" id="passwordToggle" aria-label="切换密码可见状态">
							<i class="password-icon" id="passwordIcon">👁️</i>
						</button>
						<div class="input-line"></div>
					</div>
				</div>

				<!-- 隐私政策复选框 -->
				<div class="privacy-section">
					<label class="privacy-checkbox">
						<input type="checkbox" id="agreechk" name="agree" value="yes">
						<span class="checkmark">
							<svg viewBox="0 0 14 14">
								<polyline points="3 7.5 6 10.5 11 4" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</span>
					</label>
					<div class="privacy-text">
						我已经阅读并同意
						<a href="#" class="privacy-link" id="goHide">《用户隐私政策》</a>
					</div>
				</div>

				<!-- 登录按钮 -->
				<button class="login-button" id="loginBtn">
					登录
				</button>

				<!-- 底部链接 -->
				<div class="bottom-links">
					<a href="#" class="bottom-link" id="clearbtn">清理缓存</a>
					<a href="#" class="bottom-link" id="regbtn">注册新用户</a>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			// 密码显示/隐藏功能
			function initPasswordToggle() {
				const passwordInput = document.getElementById('pwd');
				const toggleButton = document.getElementById('passwordToggle');
				const passwordIcon = document.getElementById('passwordIcon');
				
				// 初始状态
				let isPasswordVisible = false;
				
				// 切换密码显示状态
				function togglePassword() {
					isPasswordVisible = !isPasswordVisible;
					
					// 切换输入框类型
					passwordInput.type = isPasswordVisible ? 'text' : 'password';
					
					// 切换图标
					passwordIcon.textContent = isPasswordVisible ? '🙈' : '👁️';
					
					// 添加切换动画
					passwordIcon.style.transform = 'scale(0.8)';
					setTimeout(() => {
						passwordIcon.style.transform = 'scale(1)';
					}, 150);
				}
				
				// 绑定点击事件
				toggleButton.addEventListener('click', togglePassword);
				
				// 绑定回车键事件（可选）
				passwordInput.addEventListener('keydown', function(e) {
					if (e.key === 'Enter') {
						// 可以在这里添加登录逻辑
					}
				});
			}
			
			// 页面加载完成后初始化
			document.addEventListener('DOMContentLoaded', function() {
				initPasswordToggle();
			});

			// 输入框焦点效果
			document.querySelectorAll('.input-field').forEach(input => {
				input.addEventListener('focus', function() {
					this.parentElement.querySelector('.input-line').style.transform = 'scaleX(1)';
				});
				
				input.addEventListener('blur', function() {
					if (!this.value) {
						this.parentElement.querySelector('.input-line').style.transform = 'scaleX(0)';
					}
				});
			});

			// 清理缓存功能
			mui("body").on("tap", "#clearbtn", function(event) {
				localStorage.setItem("first", "1");
				localStorage.setItem("token", "");
				mui.toast("清除成功");
				var curr = plus.webview.currentWebview();
				var wvs = plus.webview.all();
				for (var i = 0, len = wvs.length; i < len; i++) {
					//关闭除setting页面外的其他页面
					if (wvs[i].getURL() == curr.getURL())
						continue;
					plus.webview.close(wvs[i]);
				}
				//打开login页面后再关闭setting页面
				plus.webview.open('startView.html');
				plus.webview.currentWebview().close();
			})
			
			// 注册新用户
			document.querySelector("#regbtn").addEventListener("tap", function() {
				mui.openWindow({
					url: 'regist.html',
					id: 'regist.html',
					createNew: false,
					show: {
						autoShow: true,
					}
				});
			})

			// 隐私政策
			document.querySelector("#goHide").addEventListener("tap", function() {
				mui.openWindow({
					url: 'policy.html',
					id: 'policy.html',
					createNew: false,
					show: {
						autoShow: true,
					}
				});
			})

			// 页面加载完成
			mui.plusReady(function() {
				//关闭等待框
				plus.nativeUI.closeWaiting();
				//显示当前页面
				mui.currentWebview.show();
			})

			// 登录功能
			document.querySelector("#loginBtn").addEventListener("tap", function() {
				var username = document.querySelector("#phone").value;
				var password = document.querySelector("#pwd").value;
				let baseUrl = localStorage.getItem("ip")
				
				// 重置错误状态
				document.querySelectorAll('.input-field').forEach(input => {
					input.classList.remove('error');
				});
				
				// 验证手机号
				if (username.trim() == "") {
					showError(document.querySelector("#phone"), "请输入手机号");
					return;
				}
				var regPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (!regPhone.test(username)) {
					showError(document.querySelector("#phone"), "请输入正确的手机号");
					return;
				}
				
				// 验证密码
				if (password.trim() == "") {
					showError(document.querySelector("#pwd"), "请输入密码");
					return;
				}
				
				// 验证隐私政策
				if (!document.querySelector("#agreechk").checked) {
					mui.toast("请同意用户私隐政策");
					return;
				}

				// 显示加载状态
				const loginBtn = this;
				const originalText = loginBtn.textContent;
				loginBtn.innerHTML = '<span class="loading"></span> 登录中...';
				loginBtn.disabled = true;

				mui.ajax(baseUrl + '/loginWithoutCode', {
					data: {
						username,
						password
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
						// 恢复按钮状态
						loginBtn.textContent = originalText;
						loginBtn.disabled = false;
						
						if (data.code == 500) {
							mui.toast(data.msg);
						} else if (data.code == 200) {
							console.log('登录成功', data.token)
							localStorage.setItem("token", data.token)
							localStorage.setItem("isLogin", "true")
							mui.openWindow({
								url: '../index.html',
								id: '../index.html',
								createNew: true,
								show: {
									autoShow: true,
								}
							});
							plus.webview.currentWebview().hide()
						}
					},
					error: function(xhr, type, errorThrown) {
						// 恢复按钮状态
						loginBtn.textContent = originalText;
						loginBtn.disabled = false;
						
						console.log(errorThrown);
						console.log(JSON.stringify(xhr));
						console.log(type);
						mui.toast("网络连接失败，请重试");
					}
				});
			})

			// 显示错误信息
			function showError(input, message) {
				input.classList.add('error');
				
				// 移除之前的错误信息
				const existingError = input.parentElement.querySelector('.error-message');
				if (existingError) {
					existingError.remove();
				}
				
				// 添加新的错误信息
				const errorDiv = document.createElement('div');
				errorDiv.className = 'error-message';
				errorDiv.textContent = message;
				input.parentElement.appendChild(errorDiv);
				
				// 3秒后自动移除错误状态
				setTimeout(() => {
					input.classList.remove('error');
					if (errorDiv.parentElement) {
						errorDiv.remove();
					}
				}, 3000);
			}
		</script>
	</body>
</html>